<template>
  <div class="px-2 pos-relative">
    <!-- 版本选择列表 -->
    <div>
      <ul class="region-list">
        <li
          v-for="item in filteredRegionOptions"
          :key="item.value"
          class="region-item"
          :class="{
            active: isActive(item),
            'has-city-list': item.version === '中国大陆版',
          }"
          @click="handleRegionClick(item)"
          @mouseenter="handleRegionHover(item)"
        >
          <span class="region-text">
            {{ item.version }}
          </span>
        </li>
      </ul>
    </div>

    <!-- 城市选择弹层 -->
    <transition name="fade">
      <div v-show="isCityListVisible" class="city-list-panel" @mouseleave="closeCityList">
       
        <div class="city-grid">
          <span
            v-for="(city, index) in cityList"
            :key="index"
            class="city-item"
            :class="{ active: isCityActive(city) }"
            @click="handleCityClick(city)"
          >
            {{ city.name }}
          </span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { Close } from "@element-plus/icons-vue";

interface Region {
  country: string;
  countryName: string;
  city: string;
  cityName: string;
  version: string;
  value: string;
}

interface CityItem {
  name: string;
  code?: string;
}

const props = defineProps<{
  region: Region;
  regionOptions: Region[];
}>();

const emit = defineEmits(["change"]);

// 响应式数据
const isCityListVisible = ref(false);
const currentHoverRegion = ref<Region | null>(null);

// 计算属性
const filteredRegionOptions = computed(() => props.regionOptions);
const isActive = computed(() => (item: Region) => item.value === props.region.value);

// 城市列表数据
const cityList: CityItem[] = [
  { name: "北京", code: "110000" },
  { name: "上海", code: "310000" },
  { name: "广州", code: "440100" },
  { name: "深圳", code: "440300" },
  { name: "杭州", code: "330100" },
  { name: "南京", code: "320100" },
  { name: "武汉", code: "420100" },
  { name: "成都", code: "510100" },
  { name: "重庆", code: "500000" },
  { name: "西安", code: "610100" },
  // 其他城市...
];

// 方法
const handleRegionClick = (item: Region) => {
  if (item.version === "中国大陆版" && !item.city) {
    // 如果是中国大陆版但没有具体城市，保持城市列表打开
    isCityListVisible.value = true;
    currentHoverRegion.value = item;
  } else {
    emit("change", item);
    closeCityList();
  }
};

const handleRegionHover = (item: Region) => {
  if (item.version === "中国大陆版") {
    isCityListVisible.value = true;
    currentHoverRegion.value = item;
  } else {
    closeCityList();
  }
};

const handleCityClick = (city: CityItem) => {
  if (currentHoverRegion.value) {
    const selectedRegion: Region = {
      ...currentHoverRegion.value,
      city: city.code || city.name,
      cityName: city.name,
      value: `${currentHoverRegion.value.country}-${city.code || city.name}`,
    };
    emit("change", selectedRegion);
  }
  closeCityList();
};

const isCityActive = (city: CityItem) => {
  return props.region.cityName === city.name;
};

const closeCityList = () => {
  isCityListVisible.value = false;
  currentHoverRegion.value = null;
};

// 监听外部region变化
watch(
  () => props.region,
  (newRegion) => {
    if (newRegion.version !== "中国大陆版") {
      closeCityList();
    }
  }
);
</script>

<style scoped lang="scss">
.region-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.region-item {
  padding: 5px 5px;
  margin: 4px 0;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;

  &:hover {
    background-color: #f5f5f5;
    color: #e4393c;
  }

  &.active {
    background-color: #e4393c;
    color: white;
  }
}

.region-text {
  font-size: 14px;
}

.city-list-panel {
  position: absolute;
  top: 0;
  left: 110px;
  width: 330px;
  background: white;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 10px;
}



.city-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  padding: 5px;
  max-height: 300px;
  overflow-y: auto;
}

.city-item {
  padding: 5px 4px;
  border-radius: 4px;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background-color: #f5f5f5;
    color: #e4393c;
  }

  &.active {
    background-color: #e4393c;
    color: white;
  }
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateX(-10px);
}
</style>
